<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/mygrxx.css"/>
    <script src="X-admin/lib/layui/layui.js"></script>
    <script src="X-admin/js/jquery.js"></script>

</head>
<body>
<!------------------------------head------------------------------>

<div class="head" id="top">
</div>
<!------------------------------idea------------------------------>
<div class="address mt" id="add">
    <div class="wrapper clearfix">
        <a href="index.html" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html" class="on">个人中心</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div class="zuo fl">
            <h3>
                <a href="#"><img id="person-img" style="border-radius: 60%;height: 100px;width: 100px"/></a>
                <p class="clearfix"><span id="username">[羊羊羊]</span><span class="fr">您好！</span></p>
            </h3>
            <div>
                <h4>我的订单</h4>
                <ul>
                    <li><a href="myorderq.html">订单中心</a></li>
                </ul>
                <h4>个人中心</h4>
                <ul>
                    <li><a href="mygxin.html">我的评价</a></li>
                    <li><a href="collection.html">我的收藏</a></li>
                    <li><a href="message.html">系统消息</a></li>
                </ul>
                <h4>账户管理</h4>
                <ul>
                    <li><a href="mygrxx.html">个人信息</a></li>
                    <li><a href="remima.html">修改密码</a></li>
                </ul>
            </div>
        </div>
        <div class="you fl">
            <h2>个人信息</h2>
            <div class="gxin">
                <div class="tx"><a><img style="width: 120px;height: 120px;border-radius:60%" id="avatar"/>
                    <p></p></a></div>
                <div class="xx">
                    <h3 class="clearfix"><strong class="fl">基础资料</strong><a href="#" class="fr" id="edit1">编辑</a></h3>
                    <div>姓名：<span id="userna"></span></div>
                    <div>地址：<span id="addres"></span></div>
                    <div>注册时间：<span id="crtime"></span></div>
                    <div><span class="fl">账号地区：中国</span><a href="#" class="fr" id="edit2"></a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="mask"></div>
<!--编辑弹框-->
<div class="bj">
    <div class="clearfix"><a href="#" class="fr gb"><img src="img/icon4.png"/></a></div>
    <h3>编辑基础资料</h3>
    <form action="http://localhost:9200/api-person/user/updateUser" method="post">
        <p><label>姓名：</label><input type="text" id="userna1"/></p>
        <p><label>地址：</label><input type="text" id="adress1"/></p>
        <p><label>电话：</label><input type="text" id="phones"/></p>
        <div class="bc">
            <input type="submit" lay-submit lay-filter="update" value="保存"/>
            <input type="button" value="取消"/>
        </div>
    </form>
</div>
<!--高级设置修改-->
<div class="xg">
    <div class="clearfix"><a href="#" class="fr gb"><img src="img/icon4.png"/></a></div>
    <h3>切换账号地区</h3>
    <form action="#" method="get">
        <p><label>姓名：</label><input type="text" value="六六六"/></p>
        <div class="bc">
            <input type="button" value="保存"/>
            <input type="button" value="取消"/>
        </div>
    </form>
</div>
<!--修改头像-->
<div class="avatar">
    <div class="clearfix"><a href="#" class="fr gb"><img src="img/icon4.png"/></a></div>
        <img id="avatar1" src="img/default.jpeg" style="width: 120px;height: 120px;border-radius:60%">
    <h3>修改头像</h3>
    <form action="" method="">
        <h4 id="showImg">请上传图片</h4>
<!--        <input type="button"  value="上传头像"/>-->
        <p>jpg或png，大小不超100M</p>
        <input type="submit"  lay-submit lay-filter="updateAvatar" value="提交" />
    </form>
</div>

<!--返回顶部-->
<div class="gotop">
    <a href="#" class="dh">
        <dl>
            <dt><img src="img/gt2.png"/></dt>
            <dd>联系<br/>客服</dd>
        </dl>
    </a>
    <a href="mygxin.html">
        <dl>
            <dt><img src="img/gt3.png"/></dt>
            <dd>个人<br/>中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none">
        <dl>
            <dt><img src="img/gt4.png"/></dt>
            <dd>返回<br/>顶部</dd>
        </dl>
    </a>
    <p>400-800-8200</p>
</div>
<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
        违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js"></script>
<script>
    var Address_Prefix = "http://localhost:9200/api-person";
    find();

    function find() {
        $.ajax({
            url: Address_Prefix + "/user/findUserById",
            data: {userid: sessionStorage.getItem("userid")},
            dataType: 'json',
            type: 'get',
            success: function (data) {
                $("#addres").html(data.data.adress);
                $("#userna").html(data.data.userna);
                $("#userna1").html(data.data.userna);
                $("#crtime").html(data.data.crtime);
                $("#name").html(data.data.userna)
                $("#avatar").attr("src", data.data.avatar);
                $("#avatar1").attr("src", data.data.avatar);
                sessionStorage.setItem("img", data.data.avatar);
                sessionStorage.setItem("username", data.data.userna);
            }
        })
        return false;
    }

    layui.use(['form', 'upload'], function () {
        var form = layui.form;
        let upload = layui.upload;
        form.on('submit(update)', function () {
            let field = {
                userna: $("#userna1").val(),
                adress: $("#adress1").val(),
                phones: $("#phones").val(),
                userid: sessionStorage.getItem("userid")
            };
            console.log(field)
            $.ajax({
                url: Address_Prefix + '/user/updateUser',//地址：访问后台的地址
                data: field,//前端传递给后台的数据
                type: 'post',
                async: false,
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                dataType: 'json',//是后端传递到前端的数据格式
                success: function (data) {//后端给前端的一个反馈
                    console.log(data)
                    if (data.code == 0) {
                        layer.msg("ok！", function () {
                            sessionStorage.setItem("userid", data.data.userid)
                        });
                    }
                }
            });
            return false;
        })
        upload.render({
            elem: '#showImg',
            url: Address_Prefix + '/upload/up',
            done: function (res) {
                $("#avatar1").attr("src",res.data);
                ava = res.data;
                sessionStorage.setItem("img",ava)
            }
        });
        form.on('submit(updateAvatar)', function (){
            let field = {
                avatar:$("#avatar1").attr("src"),
                userid:sessionStorage.getItem("userid")
            }
            $.ajax({
                url:Address_Prefix+'/user/updateAvatar',
                data:field,
                dataType:'json',
                type:"post",
                success:function (data){
                    if(data.code == 0){
                        layer.alert("上传成功", {
                                icon: 6
                            }, function () {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            }
                        );
                }else{
                        layer.alert("上传失败", {
                                icon: 6
                            }, function () {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            }
                        );
                    }
                }
            })
            return false;
        })
    });
</script>
</body>
</html>
